<template>
  <div class="quill-editor-box">
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :disabled="disabled"
      :options="options"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
    />
  </div>
</template>
<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import { uploadUrl } from '@/api/common'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Quill.register('modules/ImageExtend', ImageExtend)
import { getToken } from '@/utils/auth'
export default {
  name: 'RichText',
  components: {
    quillEditor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    editorOption: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      token: '',
      content: '',
      options: {
        placeholder: '请输入内容',
        // readOnly: true,  // readOnly配置不生效
        modules: {
          ImageExtend: { // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
            name: 'file', // 图片参数名
            size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
            action: uploadUrl, // 服务器地址, 如果action为空，则采用base64插入图片
            // response 为一个函数用来获取服务器返回的具体图片地址
            // 例如服务器返回{code: 200; data:{ url: 'xxx.jpg'}}
            // 则 return res.data.url
            response: (res) => {
              return res?.data?.url
            },
            headers: (xhr) => {
              xhr.setRequestHeader('Authorization', this.token)
            }, // 可选参数 设置请求头部
            sizeError: () => {}, // 图片超过大小的回调
            start: () => {}, // 可选参数 自定义开始上传触发事件
            end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            error: () => {}, // 可选参数 上传失败触发的事件
            success: () => {}, // 可选参数  上传成功触发的事件
            change: (xhr, formData) => {
              // xhr.setRequestHeader('myHeader','myValue')
              // formData.append('isPublic', true)
            } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
          },
          toolbar: { // 如果不上传图片到服务器，此处不必配置
            container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
            handlers: {
              'image': function() { // 劫持原来的图片点击按钮事件
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      }
    }
  },

  watch: {
    value(val) {
      this.content = val
    }
  },

  created() {
    this.token = getToken()
  },

  mounted() {
    this.content = this.value
    // 先禁用，再启用，防止赋值后页面滚动
    this.$refs.myQuillEditor.quill.enable(false)
    setTimeout(() => {
      this.$refs.myQuillEditor.quill.enable(true)
    }, 500)
  },

  methods: {
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      quill.enable(!this.disabled)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.$emit('update:value', html)
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep {
  .ql-editor {
    min-height: 200px;
  }
}

</style>
